<template>
    <el-card class="mt16">
        <!-- 添加分类 -->
        <el-row>
            <el-col>
                <el-button type="primary" @click="openAddGoodsCateDia">添加分类</el-button>
            </el-col>
        </el-row>
        <!-- 分类列表 -->
        <el-table class="mt16" border :data="goodsCateList" row-key="cat_id">
            <el-table-column label="#" type="index">
                <template #default="scope">
                    <div>
                        {{ scope.row.idx }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="分类名称" prop="cat_name"></el-table-column>
            <el-table-column label="是否有效">
                <template #default="scope">
                    <div>
                        <el-icon v-if="!scope.row.cat_deleted" color="#09a511">
                            <SuccessFilled />
                        </el-icon>
                        <el-icon color="#f00" v-else>
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                </template>

            </el-table-column>
            <el-table-column label="排序">
                <template #default="scope">
                    <div>
                        <el-tag effect='dark' :type="tagTypeArr[scope.row.cat_level]"> {{ rank(scope.row.cat_level)
                        }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default>
                    <div>
                        <el-button type="primary" size="small">编辑</el-button>
                        <el-button type="danger" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination class="mt16" v-model:current-page="goodsCateInfo.pagenum" v-model:page-size="goodsCateInfo.pagesize"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="goodsTotal"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog v-model="isAddCate" title="添加分类" width="40%" :before-close="handleClose">
        <el-form>
            <el-form-item label="分类名称">
                <el-input v-model="addGoodsCateObj.cat_name" placeholde="请添加新的分类"></el-input>
            </el-form-item>

            <el-form-item label="父级分类">
                <p>{{ checkedArr }}</p>
                <el-cascader clearable ref="goodsCateCasCaderRef" v-model="checkedArr" :options="goodsTwoCate"
                    :props="defaultProps" @change="handleChange" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isAddCate = false">取消</el-button>
                <el-button type="primary" @click="addGoodsCateOk">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import * as API from '@/http/api'
import type { CascaderProps } from 'element-plus'
import { ElCascader } from 'element-plus'

//添加分类参数对象
const addGoodsCateObj = reactive({
    //父级分类id
    cat_pid: 0,
    //新的分类名称
    cat_name: '',
    //分类级别
    cat_level: 0
})


//监听分类改变
const handleChange = () => {
    goodsCateCasCaderRef.value?.togglePopperVisible()
}


//级联选择器选中的数组
const checkedArr = ref<number[]>([])
//级联选择器数据源
const goodsTwoCate = ref([])
//等级选择器配置项
const defaultProps = reactive<CascaderProps>({
    label: 'cat_name',
    value: 'cat_id',
    children: 'children',
    checkStrictly: true,
    expandTrigger: "hover"
})

//是否显示分类
const isAddCate = ref(false)

//关闭分类对话框
const handleClose = () => {
    addGoodsCateObj.cat_name = ''
    checkedArr.value = []
}

const goodsCateCasCaderRef = ref<InstanceType<typeof ElCascader>>()


//打开添加商品分类对话框
const openAddGoodsCateDia = async () => {
    //打开添加商品分类对话框清空上次的分类名称
    addGoodsCateObj.cat_name = ''
    goodsCateInfo.type = 2;
    const res = await API.getGoodsCateListApi(goodsCateInfo)
    console.log('只有两级分类：', res)
    goodsTwoCate.value = res.data.result;
    isAddCate.value = true
}

//确定添加分类
const addGoodsCateOk = async () => {
    if (checkedArr.value.length !== 0) {
        //当前分类级别
        addGoodsCateObj.cat_level = checkedArr.value.length
        //父级分类id
        addGoodsCateObj.cat_pid = checkedArr.value[checkedArr.value.length - 1]
    } else {
        addGoodsCateObj.cat_level = 0;
        addGoodsCateObj.cat_pid = 0;
    }

    //调添加分类接口
    await API.addGoodsCateApi(addGoodsCateObj)

    //隐藏对话框
    isAddCate.value = false

    //刷新分类列表
    getGoodsCateList()
}

//商品分类数组
const goodsCateList = ref([])
//商品分类总条数
const goodsTotal = ref(0)

//索引签名类型
type tagType = {
    [i: string]: string
}

//tag类型
const tagTypeArr = reactive<tagType>({
    '0': '',
    '1': 'success',
    '2': 'warning'
})

onMounted(() => {
    //加载商品分类列表
    getGoodsCateList()
})

//商品分类分页条件
const goodsCateInfo = reactive({
    type: 3,
    pagenum: 1,
    pagesize: 5
})

//定义商品分类列表方法
const getGoodsCateList = async () => {
    //调用商品分类列表接口
    const res = await API.getGoodsCateListApi(goodsCateInfo)
    const { result, total } = res.data;

    //遍历result,给每行添加一个自定义序号 例如：idx
    result.forEach((item: any, index: number) => {

        item.idx = index + 1;
    })

    console.log('result:', result)

    goodsCateList.value = result;
    goodsTotal.value = total;
}

//每页显示的条数
const handleSizeChange = (val: number) => {
    goodsCateInfo.pagesize = val
    getGoodsCateList()
}

//当前页码
const handleCurrentChange = (val: number) => {
    goodsCateInfo.pagenum = val
    getGoodsCateList()
}


</script>


<style>
.el-radio {
    position: absolute;
    width: 100%;
}

.el-radio__inner {
    display: none
}
</style>
<style scoped>
@import '@/assets/public.css';

:deep(.el-cascader) {
    width: 100%;
}
</style>